﻿@model PersonalWebsite.Models.ViewPost

<style>
    #main {
        overflow: hidden;
        width: 100%; /*幅*/
        float: right; /*右に回り込み*/
    }

    .mask {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 1.0);
        z-index: 0;
        display: none;
    }


    .modal {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 75%;
        transform: translate(-50%,-50%);
        border-radius: 5px;
        background: #fff;
        box-shadow: 2px 3px 20px rgba(0,0,0,0.2);
        z-index: 120;
        display: none;
        color: black;
        line-height: 25px;
    }

    .modal .modal-header {
        height: 50px;
        border-bottom: 1px solid #f5f5f5;
        padding: 0 15px;
    }

    .modal .modal-header p {
        line-height: 50px;
        display: inline-block;
    }

    .modal .modal-header .title {
        font-size: 18px;
        color: #333;
    }

    .modal .modal-header .close {
        float: right;
        font-size: 26px;
        margin-top: -2px;
        color: #9C9FA4;
        cursor: default;
    }

    .modal .modal-content {
        margin-left: 5%;
        margin-right: 5%;
        font-size: 14px;
        font-family: 'MS Gothic';
        min-height: 100px;
        color: black;
    }

    .modal .modal-footer .btn {
        padding: 0 20px;
        height: 36px;
        line-height: 36px;
        color: white;
        background: #409EFF;
        border: none;
    }

    .modal .modal-footer {
        border-top: 1px solid #f5f5f5;
        padding: 15px;
        text-align: right;
    }

    input {
        border: 1px solid #ccc;
        padding: 5px 0px;
        border-radius: 3px;
        padding-left: 5px;
        width: 100%;
        color: black;
    }

    input:focus {
        border: 1px solid #0094ff;
    }
</style>

<body>

    <div id="container">

        <div id="contents">

            <div id="main">

                <section>

                    <h2>POST<span>Owner's Personal Post</span></h2>

                    <table class="ta1">
                        <caption>All the posts are sorted by the order of time.</caption>

                        @foreach(var item in Model.PostList)
                        {
                            string TableHead = Html.DisplayFor(modelItem => item.TableHead).ToString();
                            string TableData = Html.DisplayFor(modelItem => item.TableData).ToString();
                            string TamidashiBit = Html.DisplayTextFor(modelItem => item.Tamidashi).ToString();
                            string Tamidashi = "colspan=\"2\" class=\"tamidashi\"";
                            string ImgSrc = Html.DisplayFor(modelItem => item.ImgSrc).ToString();
                            if(TamidashiBit.Equals("False"))
                            {
                                Tamidashi = "";
                            }
                            else
                            {
                                Tamidashi = "colspan=\"2\" class=\"tamidashi\"";
                            }


                            <tr>
                                <th @Html.Raw(Tamidashi)> @TableHead</th>
                                @if (TamidashiBit.Equals("False"))
                                {
                                <td>
                                    @Html.Raw(Html.Encode(TableData).Replace("\n", "<br />"))
                                    <!--若ImgSrc不为NoImg，则显示图片-->
                                    @if (!ImgSrc.Equals("NoImg"))
                                    {
                                        <img src="../../Files/@ImgSrc" alt="" />
                                    }
                                </td>
                                }
                            </tr>
                        }
                    </table>

                </section>

                <section>
                    <div class="modal">
                        <div class="modal-header">
                            <p class="title">Answer these questions!</p>
                            <p class="close"></p>
                        </div>

                        <div class="modal-content">
                            <form action="" method="post" id="qform">
                                @{ 
                                    int count = 1;
                                }

                                @if (ViewBag.PostQuestion == "true")
                                {
                                    foreach (var vq in ViewBag.vqlist)
                                    {
                                        <input type="hidden" name="question-@count" value="@vq.Content" />
                                        @vq.Content<br />
                                        <input type="text" name="answer-@count" />
                                        count++;
                                    }
                                }
                            </form>
                        </div>
        

                        <div class="modal-footer">
                            <button type="button" onclick="answerQuestion()">Submit</button>
                        </div>
                    </div>

                    <div class="mask"></div>
                </section>

            </div>
            <!--/#main-->
            <!--<div id="sub">

                <h2>ARCHIVE</h2>
                <ul class="submenu">
                    <li><a href="#">2019年</a></li>
                    <li><a href="#">2018年</a></li>
                    <li><a href="#">2017年</a></li>
                    <li><a href="#">2016年</a></li>
                    <li><a href="#">2015年</a></li>
                </ul>

            </div>
            <!--/#sub-->

        </div>
        <!--/#contents-->

        <footer>
        </footer>

    </div>
    <!--/#container-->
    <!--ページの上部に戻る「↑」ボタン-->
    <p class="nav-fix-pos-pagetop"><a href="#">↑</a></p>

    <!--メニュー開閉ボタン-->
    <div id="menubar_hdr" class="close"></div>

    <!--メニューの開閉処理条件設定　900px以下-->
    <script>
        if (OCwindowWidth() <= 900) {
            open_close("menubar_hdr", "menubar-s");
                                    }
    </script>

    <!--パララックス用ファイル読み込み-->
    <script src="js/jquery.inview.js"></script>
    <script src="js/jquery.inview_set.js"></script>
    <script>
        window.onload = function () {
            if (@ViewBag.PostQuestion == true) {
                var mask = document.getElementsByClassName("mask")[0];
                var modal = document.getElementsByClassName("modal")[0];
                mask.style.display = "block";
                modal.style.display = "block";
            }
        }

        function answerQuestion() {
            $.ajax({
                type: "post",
                async: true,
                processData: false,
                url: "/Home/PostQuestion",
                data: $('#qform').serialize(),
                success: function (data) {
                    if (data.code == 200) {
                        var mask = document.getElementsByClassName("mask")[0];
                        var modal = document.getElementsByClassName("modal")[0];
                        mask.style.display = "none";
                        modal.style.display = "none";
                    }
                    else {
                        alert("Wrong answer!");
                        location.reload();
                    }
                }
            });
        }
    </script>

</body>
